import { Container, Box, Button } from 'theme-ui'

import { Banner, Tiles } from '..'
import Graph from '../components/graph'
import ReadmeBadges from '../components/readme-badges'
import IntroCodeSamples from '../components/intro-code-samples'

import Testimonials from './testimonials'

<Banner>

<Graph />

# Theme UI: The Design Graph Framework

Theme UI is a library for creating themeable user interfaces based on
constraint-based design principles. Build custom component libraries, design
systems, web applications, Gatsby themes, and more with a flexible API for
best-in-class developer ergonomics.

[Documentation](/getting-started)
[GitHub](https://github.com/system-ui/theme-ui)

</Banner>

<Container>

<ReadmeBadges />

<Tiles columns={2}>

1. ## Create your theme

<IntroCodeSamples.ThemeCreation />

2. ## Style your UI

<IntroCodeSamples.BasicUsage />

</Tiles>

<Tiles>

- ## Ergonomic
  Best-in-class developer ergonomics let you style your application quickly and
  consistently based on your theme
- ## Themeable
  Quickly and easily reference values from your theme throughout your entire
  application, on any component
- ## Constraint-based
  Use color, typography, and layout scales rooted in constraint-based design
  principles

</Tiles>

<Testimonials />

<Tiles
  sx={{
    fontWeight: 'bold',
    a: {
      display: 'block',
      color: 'inherit',
      textDecoration: 'none',
      ':hover': {
        textDecoration: 'underline',
      }
    }
  }}>

- [Theme-aware `sx` prop for CSS](/getting-started/#sx-prop)
- [30+ Built-in primitive UI components](/components)
- [Simple, expressive MDX styling](/mdx/styling)
- [Style with or without creating components](/getting-started/#sx-prop)
- [Easy, mobile-first responsive styles](/getting-started/#responsive-styles)
- [Built-in dark mode](/color-modes)
- [Plugin for Gatsby sites and themes](/packages/gatsby-plugin)
- [Robust theming API](/theming)
- [Backed with a Theme Specification](/theme-spec)

</Tiles>

<Box py={6}>

## Get Started

{<Button as="a" href="/getting-started" variant="black">Explore the Docs</Button>}

</Box>

</Container>
